<template>
    <div>
        <!-- <h1>土地信息录入</h1> -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>报告厅</el-breadcrumb-item>
            <el-breadcrumb-item>基本信息录入</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-form ref="hallFormRefs" :model="lectureInputList" :rules="lectureFormRules" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-col :span="16" :offset="1">
                            <p>基本信息</p>
                            <el-form-item label="校区名称" prop="campusId">
                                <el-select v-model="lectureInputList.campusId" placeholder="请选择校区"  @change="schoolChange">
                                    <el-option
                                        v-for="item in campusName"
                                        :key="item.campusName"
                                        :label="item.campusName"
                                        :value="item.campusId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="楼栋名称" prop="buildId">
                                <el-select v-model="lectureInputList.buildId" placeholder="请选择楼栋" @change="buildChange">
                                    <el-option
                                        v-for="item in buildName"
                                        :key="item.buildName"
                                        :label="item.buildName"
                                        :value="item.buildId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="楼层名称" prop="floorId">
                                <el-select v-model="lectureInputList.floorId" placeholder="请选择楼层">
                                    <el-option
                                        v-for="item in floorName"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                    </el-option>
                                </el-select>
                                <!-- <el-input v-model="lectureInputList.floorNum" placeholder="请输入楼层"></el-input> -->
                            </el-form-item>
                            <el-form-item label="房间名称" prop="auditoriumName">
                                <el-input  v-model="lectureInputList.auditoriumName"  placeholder="请输入房间名称"></el-input>
                            </el-form-item>
                            <el-form-item label="可容纳人数" prop="auditoriumCapacity">
                                <el-input v-model="lectureInputList.auditoriumCapacity" placeholder="请输入可容纳人数"></el-input>
                            </el-form-item>
                            <el-form-item label="性质" prop="auditoriumType">
                                <el-input  v-model="lectureInputList.auditoriumType"  placeholder="请输入房间性质"></el-input>
                            </el-form-item>
                            <el-form-item label="面积" prop="auditoriumArea">
                                <el-input v-model="lectureInputList.auditoriumArea" placeholder="请输入使用面积" ></el-input>
                            </el-form-item>
                            <el-form-item label="使用方向" prop="auditoriumUsageDirection">
                                <el-input v-model="lectureInputList.auditoriumUsageDirection" placeholder="请输入使用方向" ></el-input>
                            </el-form-item>
                            <el-form-item label="结构" prop="auditoriumStructure">
                                <el-input v-model="lectureInputList.auditoriumStructure" placeholder="请输入房间结构"></el-input>
                            </el-form-item>
                            <el-form-item label="布局" prop="auditoriumLayout">
                                <el-input v-model="lectureInputList.auditoriumLayout" placeholder="请输入房间布局"></el-input>
                            </el-form-item>
                        </el-col>
                     </el-col>
                     
                        <el-col :span="8">
                            <p>添加设备信息</p>
                                <el-form-item label="附着物" prop="landOnInfo">
                                    <el-input  v-model="lectureInputList.landOnInfo"  placeholder="请输入土地地上附着物"></el-input>
                                </el-form-item>
                                <el-form-item label="地下设施" prop="landDownInfo">
                                    <el-input  v-model="lectureInputList.landDownInfo" placeholder="请输入地下设施"></el-input>
                                </el-form-item>
                                <el-form-item label="其他" prop="landOtherInfo">
                                    <el-input  v-model="lectureInputList.landOtherInfo"  placeholder="请输入其他备注"></el-input>
                                </el-form-item>
                            <el-form-item>
                                <el-button type="info" @click="resetHallForm">重置</el-button>
                                <el-button type="primary" @click="submitHallForm">提交</el-button>
                            </el-form-item>
                        </el-col>
                </el-row>
            </el-form>     
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 表单
            lectureInputList:{
                campusId: '',
                buildId:'',
                floorId:'',
                auditoriumName:'',
                auditoriumType:'',
                auditoriumArea:'',
                auditoriumCapacity:'',
                auditoriumUsageDirection:'',
                auditoriumStructure:'',
                auditoriumLayout:'',
                username: '709401953'
            },
            
            // 校区信息
            campusName:{},
            // 校区id
            campuseId:'',
            
            // 楼栋信息
            buildName:{},
            buildId:'',
            
            // 楼层信息
            floorName:{},
            
            formData:{},
            // 级联选择器的数据
            landList:[],
            // 表单验证规则
            lectureFormRules:{
                campusId:[
                    {required:true,message:"请选择校区",trigger:"blur"} 
                ],
                buildId:[
                    {required: true, message:'请选择楼栋', trigger: 'blur'}
                ],
                floorId:[
                    {required: true, message:'请选择楼层', trigger: 'blur'}
                ],
                auditoriumName:[
                    {required: true, message:'请输入房间名', trigger: 'blur'}
                ],
                auditoriumCapacity:[
                    {required: true, message:'请输入容纳人数', trigger: 'blur'}
                ]
            }
        }
    },
    created(){
        this.getSchoolList()
    },
    methods:{
        
        // 重置表单
        resetBaseLandList(){
            // 表单的引用对象 ref="landFormRef"  this指向这个实例对象
            this.$refs.landFormRefs.resetFields();
        },
        // 提交表单信息
        async submit(){
            const res = await this.$http.post('landView', this.landViewDto);
            console.log(res);
            if(res.status !==200){
                     return this.$message.error('插入数据失败！');
                 }
                this.resetBaseLandForm();
                return this.$message.success('添加成功！');
        },
        
        // 获取校区信息
        async getSchoolList(){
            const res = await this.$http.get('campus/findAll');
            console.log(res);
            if(res.data.code !==1){
                return this.$message.error('校区信息查询失败！');
            }
            this.campusName = res.data.data;
        },
        // 校区信息选择以后发生改变获得选择的校区的id
        schoolChange(){
            this.campuseId = this.lectureInputList.campusId;
            // console.log(this.campuseId);
            this.getBuildList();
        },
        
        // 获取楼栋信息
        async getBuildList(){
            // console.log(this.campuseId);
            const res = await this.$http.get(`build/build/${this.campuseId}`);
            console.log(res);
            if(res.data.code !==1){
                return this.$message.error('楼栋信息获取失败！');
            }
            this.buildName = res.data.data;
        },
        
        //楼栋信息选择以后得到当前的楼栋名称
        buildChange(){
            this.buildId = this.lectureInputList.buildId;
            // console.log(this.buildId);
            this.getFloorList();
        },
        
        // 根据当前的楼栋名称获取楼层
        async getFloorList(){
            // console.log(this.buildId);
            const res = await this.$http.get(`floor/getFloorNums/${this.buildId}`);
            console.log(res);
            this.floorName = res.data.data;
        },
        
        
        
        // 重置已填写
        resetHallForm(){
            this.$refs.hallFormRefs.resetFields();
        },
        // 提交报告厅信息
        async submitHallForm(){
            // console.log(this.lectureInputList);
            await this.$http.post(`auditoriumView`,this.lectureInputList).then(res=>{
                if(res.data.code !==1){
                return this.$message.error('报告厅数据录入失败！');
                }
                this.$message.success('报告厅数据录入成功！');
                this.resetHallForm();
                // console.log(res);
            });
            
            
        }
    }
}
</script>
<style scoped>
    P{  
        font-family: Adobe Heiti Std;
        font-size: 15px;
        font-weight: bolder;
        color: #4994fb;
    }
    .el-select{
        width: 100%;
    }
</style>
